<template>
  <div class="default-layout">
    <Head>
      <Title>{{ siteConfig.title }}</Title>
      <Meta type="keywords" :content="siteConfig.keywords"/>
      <Meta type="description" :content="siteConfig.description"/>
    </Head>
    <header>
      <WebHeader :categories="categories"/>
      <!-- 栏目树 d-none d-sm-block：在xs(默认宽度576px)隐藏 -->
      <div class="d-none d-sm-block">
        <Categories :categories="categories"/>
      </div>
    </header>
    <main>
      <!-- 修改el语言为中文 -->
      <el-config-provider :locale="zhCn">
        <slot></slot>
      </el-config-provider>
    </main>
    <footer>
      <WebFooter/>
    </footer>
  </div>
</template>

<script>
import WebHeader from '@/components/layout/WebHeader'
import WebFooter from '@/components/layout/WebFooter'
import Categories from '@/components/layout/Categories'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

export default {
  components: { Categories, WebFooter, WebHeader},
  props: {
    // 栏目树
    categories: {
      required: true
    }
  },
  data () {
    return {
      zhCn,
      siteConfig: {
        title: import.meta.env.VITE_SITE_TITLE,
        keywords: import.meta.env.VITE_SEO_KEYWORDS,
        description: import.meta.env.VITE_SEO_DESCRIPTION
      }
    }
  }
}
</script>
